<template>
  <div>
    <el-dialog :visible.sync="showModal" style="width: 100%"  fullscreen title="修改表" class="editDialog">
      <el-form :model="editTable" ref="editTableForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="表名"
                          prop="tableName"
                          :rules="tableNameRules">
              <el-input
                class="nameInput"
                placeholder="请输入表名"
                size="small"
                disabled
                v-model="editTable.tableName">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="描述"
                          prop="tableDescribe"
                          :rules="tableDescribeRules">
              <el-input
                class="describeInput"
                placeholder="请输入表描述"
                disabled
                size="small"
                v-model="editTable.tableDescribe">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-button style="border-radius: 0"
                   type="primary" size="small"
                   icon="el-icon-plus"
                   @click="addField()">添加字段
        </el-button>
        <el-button style="border-radius: 0"
                   type="primary" size="small"
                   v-if="selectedFields.length>0"
                   icon="el-icon-minus"
                   @click="deleteField()">删除字段
        </el-button>
        <el-button style="border-radius: 0"
                   type="primary" size="small"
                   v-if="selectedFields.length===1"
                   icon="el-icon-top"
        >上移一行
        </el-button>
        <el-button style="border-radius: 0"
                   type="primary" size="small"
                   v-if="selectedFields.length===1"
                   icon="el-icon-bottom"
        >下移一行
        </el-button>
        <el-tabs v-model="tabActiveName">
          <el-tab-pane label="数据库属性" name="first">
            <el-table :data="editTableFields" height="550"
                      @selection-change="handleSelectionChange"
                      :header-cell-style="{'text-align':'center','height':'49px','color':'black','background-color':'rgb(250,250,250)'}"
                      :cell-style="{'text-align':'center'}"
            >
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>

              <el-table-column
                prop="index"
                width="50"
                label="#"
              >
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>

              <el-table-column
                prop="fieldName"
                label="字段名"
                width="240"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fieldName" placeholder="请输入" :disabled="scope.row.fieldName==='id'" size="small"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                prop="fieldDescribe"
                label="描述"
                width="240"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fieldDescribe"
                            placeholder="请输入"
                            :disabled="scope.row.fieldName==='id'"
                            size="small"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                prop="fieldTypeLength"
                label="长度"
                width="140"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fieldTypeLength" :disabled="scope.row.fieldName==='id'" size="small"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                prop="fieldTypeDecimalLength"
                label="小数"
                width="140"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.fieldTypeDecimalLength" :disabled="scope.row.fieldName==='id'" size="small"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                prop="fieldTypeDecimalLength"
                label="默认值"
                width="140"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.defaultValue" :disabled="scope.row.fieldName==='id'" size="small"></el-input>
                </template>
              </el-table-column>

              <el-table-column
                prop="fieldType"
                label="字段类型"
                width="240"
              >
                <template slot-scope="scope">
                  <el-select v-model="scope.row.fieldType" :disabled="scope.row.fieldName==='id'" size="small">
                    <el-option v-for="(item,index) in fieldTypes"
                               :key="index"
                               :value="item"
                               :label="item"
                    >
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column
                prop="primaryKey"
                label="主键"
              >
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.isPrimaryKey" :disabled="scope.row.fieldName==='id'" size="small"></el-checkbox>
                </template>
              </el-table-column>

              <el-table-column
                prop="canNull"
                label="允许为空"
              >
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.canNull" :disabled="scope.row.fieldName==='id'" size="small"></el-checkbox>
                </template>
              </el-table-column>

            </el-table>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="second">页面属性</el-tab-pane>
        </el-tabs>

        <div style="margin-top: 20px;text-align: right">
          <el-button type="warning" style="border-radius: 0" @click="showModal=false">取消</el-button>
          <el-button type="primary" style="border-radius: 0" @click="editOnlineTable">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import {editTable, defaultFields, fieldTypes, getByName, edit} from "@/api/onlineTable";
import {Message} from "element-ui";

export default {
  name: "EditTableDialog",
  props: {
    showEditDialog: {
      type: Object,
    },
    table: {
      type: Object
    }
  },

  computed: {},
  watch: {
    table: {
      handler(newValue) {
        this.editTable = newValue
        this.editTableFields = Object.assign([], newValue.tableFields)
      },
      deep: true
    },
    showEditDialog: {
      handler(newValue) {
        this.showModal = newValue.show
      },
      deep: true
    }
  },
  data() {
    return {
      tabActiveName: 'first',
      showModal: false,
      editTable: {
        tableName: '',
        tableDescribe: '',
      },
      editTableFields: [],
      tableNameRules: [{required: true, message: '请输入表名', trigger: 'blur'}],
      tableDescribeRules: [{required: true, message: '请输入描述', trigger: 'blur'}],
      fieldNameRules: [{required: true, message: '请输入字段名', trigger: 'blur'}],
      fieldDescribeRules: [{required: true, message: '请输入字段描述', trigger: 'blur'}],
      defaultFields: [],
      selectedFields: [],
      fieldTypes: [],
    }
  },
  created() {
    this.getDefaultFields()
    this.initEditFields()
    this.getFieldTypes()
  },
  methods: {
    initEditFields() {
      this.editTableFields = []
      this.editTableFields.push(...this.defaultFields);
    },
    valaidTableExist(rule, value, callback) {
      getByName({tableName: this.editTable.tableName}).then(res => {
        if (res.success && res.result.length > 0) {
          callback(new Error('表名已存在'));
        } else {
          callback()
        }
      })

    },
    getDefaultFields() {
      defaultFields().then(res => {
        if (res.success) {
          this.defaultFields = res.result
          this.editTableFields.push(...res.result)
        }
      })
    },
    getFieldTypes() {
      fieldTypes().then(res => {
        if (res.success) {
          this.fieldTypes = res.result
        }
      })
    },
    editOnlineTable() {
      this.$refs['editTableForm'].validate(valid => {
        if (valid) {
          this.editTable.tableFields = this.editTableFields
          edit(this.editTable).then(res => {
            if (res.success) {
              this.showModal = false
              Message.success("修改成功！");
              this.$refs['editTableForm'].resetFields()
              this.$emit('refresh')
            }
          })
        }
      })
    },
    addField() {
      let field = {fieldName: '', fieldDescribe: '', fieldType: 'String', fieldTypeLength: 32, fieldTypeDecimalLength: 0, canNull: true}
      this.editTableFields.push(field)
    },
    deleteField() {
      this.selectedFields.forEach(item => {
        if (item.fieldName !== 'id') {
          this.editTableFields.splice(this.editTableFields.indexOf(item), 1)
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.selectedFields = val
    },
  }
}
</script>


<style scoped lang="scss">
.editDialog {
  width: 2000px;

  .nameInput {
    width: 280px;
  }

  .describeInput {
    width: 280px;
  }
}
</style>
